<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>12_盒子模型-内容区-默认宽度</title>
        <style>
            /* #d1 {
                width: 500px;
                height: 300px;
                background-color: aquamarine;
            } */

            /* #d2 { */
                /* 如果该盒子没有设置外边距  那么盒子的宽就和父盒子一样 
                   如果该盒子有设置外边距  那么盒子的宽就是父盒子的宽减去左右外边距
                */
                /* height: 200px;
                margin-left: 20px;
                margin-right: 20px;
                background-color: red; */
            /* } */


            #d1 {
                width: 600px;
                height: 300px;
                background-color: aquamarine;
            }

            #d2 {
                height: 200px;
                margin-left: 20px;
                margin-right: 20px;

                border-left: 5px solid #000;
                border-right: 5px solid #000;

                padding-left: 10px;
                padding-right: 10px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <!-- （1）盒子的宽 -->
        <!-- <div id="d1">
            <div id="d2">

            </div>
        </div> -->

        <!-- （2）内容的宽 -->
        <div id="d1">
            <div id="d2"></div>
        </div>
    </body>
</html>